<template>
  <div class="container">
    <div class="header">
      <!-- <nuxt-link :to="{name:'index'}" class="left"> -->
      <div class="left">
        <nuxt-link to="/"></nuxt-link>
        <span>&nbsp;·&nbsp;</span>
        <span>志愿</span>
      </div>
      <!-- </nuxt-link> -->
      <div class="right">
        <avatar></avatar>
      </div>
    </div>
    <div class="main-wrap">
      <div class="main">
        <div class="nuxt-wrap zhiyuan-wrap return-main">
          <nuxt />
          <!-- <keep-alive>
            <nuxt v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <nuxt v-if="!$route.meta.keepAlive"/> -->
        </div>
      </div>
    </div>
    <top-btn></top-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  }
}
</script>

<style scoped  lang="scss">
@import "@/assets/scss/zhiyuan.scss";
$header_height: 50px;
.container {
  min-height: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  background: $grey;
  width: fit-content;
  min-width: 100%;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    height: $header_height;
    width: 100%;
    padding: 0 60px;
    background-color: $light;
    color: $light;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px 0 $stable;
    z-index: 1000;
    .left {
      display: flex;
      align-items: center;
      > a {
        background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/logo_zhiyuan.png")
          center no-repeat;
        background-size: cover;
        /* background: url("https://fdwebhost.oss-cn-huhehaote.aliyuncs.com/zhiyazhiyuan/images/logo-zhiyuan.png") center no-repeat;
        background-size: 100% 100%; */
        text-align: left;
        width: 72px;
        height: 25px;
        display: inline-block;
      }
      span {
        color: $dark;
        font-size: 22px;
        margin-top: -2px;
        // letter-spacing: 2px;
        vertical-align: middle;
        font-weight: 300;
      }
      .icon-logo {
        margin-right: 10px;
        font-size: 22px;
        vertical-align: middle;
      }
    }
    .right {
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      > a {
        color: $dark;
        padding-right: 10px;
        letter-spacing: 1px;
        line-height: 35px;
        &:hover,
        &:focus {
          color: $positive !important;
          text-decoration: none !important;
          background: none !important;
        }
      }
      /deep/ .avatar {
        li:hover,a:hover {
          color: $positive;
          cursor: pointer;
        }
        .icon {
          color: black;
        }
      }
    }
  }
  .main-wrap {
    height: 100%;
    // flex: 1;
    // display: flex;
    // overflow: hidden;
    margin-top: $header_height;
    >.main {
      // padding: 50px 60px;
      padding: 60px 0;
      // overflow: hidden;
      min-height: 100%;
      // width: 100%;
      height: auto;
      // flex: 1;
      // display: flex;
      // justify-content: center;
      // overflow-y: auto;
      .nuxt-wrap {
        position: relative;
        margin:0 auto;
        width:$containerWidth;
        // padding: 20px 10px;
        padding: 10px;
        background: $light;
        min-height: 100%;
        // overflow-y: auto;
        // border:1px solid red;
        box-sizing: border-box;
      }
    }
  }
}
</style>
